import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import './indexPage.less'

import Texty from 'rc-texty'
import 'rc-texty/assets/index.css'
import QueueAnim from 'rc-queue-anim'

class IndexPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      english: '',
      author: '',
      timer: null,
      currentIndex: 0,
      allText: [
        {
          e:
            '“When you are convinced that your cause is right, have the courage to take a stand.”',
          c: '「 当你相信自己的理由是正当的，就要有勇气守住立场。」',
          author: '– 提姆·库克 (苹果执行长)'
        },
        {
          e: '“Cease to struggle and you cease to live.”',
          c: '「 停止奋斗，你就停止了生活。」',
          author: '– 汤玛斯‧卡莱尔 (作家)'
        },
        {
          e:
            '“Few things are impossible in themselves; and it is often for want of will, rather than of means, that man fails to succeed.”',
          c:
            '「 事情很少是不可能的；人们之所以不成功，与其说是条件不够，不如说是决心不够。」',
          author: '– 法兰索瓦·德·拉罗希福可 (作家)'
        },
        {
          e:
            '“If you have great talents, industry will improve them; if you have but moderate abilities, industry will supply their deficiency.”',
          c:
            '「 如果你很有天赋，勤勉会使其更加完善；如果你能力一般，勤勉会补足其缺陷。」',
          author: '– 约书亚·雷诺兹 (画家)'
        }
      ]
    }
  }

  componentDidMount() {
    this.initText()
    this.timer = setInterval(() => {
      this.initText()
    }, 3000)
  }

  componentWillUnmount() {
    clearInterval(this.timer)
    this.timer = null
  }

  initText() {
    let i = Math.floor(Math.random() * 4)
    this.setState({
      // text: this.state.allText[i].c,
      // english: this.state.allText[i].e,
      // author: this.state.allText[i].author,
      show: true,
      currentIndex:
        this.state.currentIndex >= 3 ? 0 : this.state.currentIndex + 1
    })
  }

  render() {
    return (
      <section className="indexPage ">
        <div className="indexPage_cover"></div>
        <div className="indexPage_title">
          <div style={{ height: '60px' }}>
            <QueueAnim delay={300} className="queue-simple">
              {this.state.allText.map((v, i) => {
                return this.state.show && this.state.currentIndex === i ? (
                  <div key={i}>
                    <p>{v.c}</p>
                    <p>{v.e}</p>
                    <p>{v.author}</p>
                  </div>
                ) : null
              })}
            </QueueAnim>
          </div>
          <div className="indexPage_jump">
            <Link to="/about">关于此站</Link>
            <Link to="/list">进入博客</Link>
          </div>
        </div>
      </section>
    )
  }
}
export default IndexPage
